<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>无缝滚动</title>
	<style type="text/css">
		body,
		ul {
			margin: 0;
			padding: 0;
		}

		.list_con {
			width: 1000px;
			height: 200px;
			border: 1px solid #000;
			margin: 10px auto 0;
			background-color: #f0f0f0;
			position: relative;
			overflow: hidden;
		}

		.list_con ul {
			list-style: none;
			width: 2000px;
			height: 200px;
			position: absolute;
			left: 0;
			top: 0;
		}


		.list_con li {
			width: 180px;
			height: 180px;
			float: left;
			margin: 10px;
		}

		.btns_con {
			width: 1000px;
			height: 30px;
			margin: 50px auto 0;
			position: relative;
		}

		.left,
		.right {
			width: 30px;
			height: 30px;
			background-color: gold;
			position: absolute;
			left: -40px;
			top: 124px;
			font-size: 30px;
			line-height: 30px;
			color: #000;
			font-family: 'Arial';
			text-align: center;
			cursor: pointer;
			border-radius: 15px;
			opacity: 0.5;
		}

		.right {
			left: 1010px;
			top: 124px;
		}
	</style>
	<script type="text/javascript">
		window.onload = function () {
			var oLeftArrow = document.getElementById("btn01");//左箭头
			var oRightArrow = document.getElementById("btn02");//右箭头
			var oSlide = document.getElementById("slide");//大黑框
			var oList = document.getElementById("list");//列表

			// 把列表的内容 添加一倍
			oList.innerHTML += oList.innerHTML;

			var left = 0;//初始位置
			var speed = -2;//初始移动的速度 向左移动为负值

			// 开启定时器 开始移动
			var timer = setInterval(move, 10);

			function move() {
				// 每次移动 增加speed像素
				left += speed;
				// 当left值小于-1000时 右侧会有空白 这是立刻变为0
				if (left < -1000) {
					left = 0;
				}
				
				// 当left值大于0时 左侧会有空白 这是立刻变为-1000
				if(left>0){
					left = -1000;
				}

				oList.style.left = left + "px";
			}

			// 点击左箭头
			oLeftArrow.onclick = function () {
				speed = -2;
			}

			// 点击右箭头
			oRightArrow.onclick = function () {
				speed = 2;
			}

			// 鼠标移动进来的事件
			oSlide.onmouseenter = function () {
				// 停止定时器
				clearInterval(timer);
			}


			// 鼠标移动离开的事件
			oSlide.onmouseleave = function () {
				// 重新开启定时器
				timer = setInterval(move, 10);
			}

		}
	</script>
</head>

<body>
	<div class="btns_con">
		<div class="left" id="btn01">&lt;</div>
		<div class="right" id="btn02">&gt;</div>
	</div>

	<div class="list_con" id="slide">
		<ul id="list">
			<li><a href=""><img src="./images/002goods001.jpg" alt="商品图片"></a></li>
			<li><a href=""><img src="./images/002goods002.jpg" alt="商品图片"></a></li>
			<li><a href=""><img src="./images/002goods003.jpg" alt="商品图片"></a></li>
			<li><a href=""><img src="./images/002goods004.jpg" alt="商品图片"></a></li>
			<li><a href=""><img src="./images/002goods005.jpg" alt="商品图片"></a></li>
		</ul>
	</div>
</body>

</html>